<template>
    <el-dialog 
        :visible.sync="badReasonTrigger" 
        top="100px" 
        class="operate-tips-dialog"
        :close="dialogClosed"
    >
        <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">不良原因</div>
        </div>
        <div class="badReason">
            <div class="reasonItem">
                <label>分类名称</label>
                <el-select
                    size="small"
                    v-model="choosenReason"
                    placeholder="请选择"
                    style="width: 20rem"
                >
                    <el-option
                        v-for="item in typeList"
                        :label="item.value"
                        :value="item.key"
                        :key="item.key"
                    />
                </el-select>
            </div>
            <div class="reasonItem">
                <label>不良名称</label>
                <el-input
                    v-model.trim="badReasonName"
                    placeholder="请填写不良名称"
                    type="text"
                    size="small"
                    style="width: 20rem"
                />
            </div>
        </div>
        <div class="saveBtn" @click="saveReason">保存</div>
    </el-dialog>
</template>
<script>
    import { addBadReason, modifyStatus } from '../axios.js'
    export default {
        data() {
            return {
                // 选择的不良原因
                choosenReason: '',
                // 不良名称
                badReasonName: '',
                // 弹出窗开启关闭
                badReasonTrigger: false,
                // 选中行的数据
                rowData: {},
                isEdit: false
            }
        },
        props: {
            typeList: {
                type: Array,
                default: () => [],
                required: true
            }
        },
        methods: {
            dialogClosed() {
                this.badReasonTrigger = false
            },
            opendialog(data) {
                let isEdit = Object.keys(data).length
                this.rowData = data;
                this.badReasonTrigger = true
                this.badReasonName = data.reason || ''
                this.choosenReason = isEdit ? data.systemDictionary.key : ''
                isEdit ? this.isEdit = true : this.isEdit = false
            },
            // 保存不良原因
            async saveReason() {
                let temp;
                this.typeList.map(ele => {
                    ele.key === this.choosenReason && (temp = ele)
                })
                if(!temp) {
                    this.$message({
                        showClose: true,
                        message: '请选择分类名称',
                        type: 'warning'
                    });
                    return 
                }
                if(!this.badReasonName.length) {
                    this.$message({
                        showClose: true,
                        message: '请填写不良名称',
                        type: 'warning'
                    });
                    return 
                }
                console.log(temp,'7877')
                // 新增的参数
                let paramCreate = {
                    createBy: 1,
                    mark: '',
                    priority: 1,
                    reason: this.badReasonName,
                    type: temp.key,
                    status: 0
                }
                // 编辑的参数
                let paramEdit = {
                    id: this.rowData.id,
                    reason: this.badReasonName,
                    type: temp.key
                }
                this.isEdit
                ?
                modifyStatus(paramEdit).then(res => {
                    console.log(res, 'sssssiiiiii')
                    if(res.status === 200) {
                        this.$message({
                            showClose: true,
                            message: '编辑成功',
                            type: 'success'
                        });
                        this.$emit('updateList')
                    }else {
                        this.$message({
                            showClose: true,
                            message: '编辑失败',
                            type: 'error'
                        });
                    }
                    // 清空输入框
                    this.choosenReason = ''
                    this.badReasonName = ''
                    this.dialogClosed()
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        message: '编辑失败',
                        type: 'error'
                    });
                    // 清空输入框
                    this.choosenReason = ''
                    this.badReasonName = ''
                    this.dialogClosed()
                })
                :
                addBadReason(paramCreate).then(res => {
                    if(res.data.result === 1) {
                        this.$message({
                            showClose: true,
                            message: '新增成功',
                            type: 'success'
                        });
                        this.$emit('updateList')
                    }else {
                        this.$message({
                            showClose: true,
                            message: '新增失败',
                            type: 'error'
                        });
                    }
                    // 清空输入框
                    this.choosenReason = ''
                    this.badReasonName = ''
                    this.dialogClosed()
                }).catch(err => {
                    console.log('err: ', err)
                    this.$message({
                        showClose: true,
                        message: '新增失败',
                        type: 'error'
                    });
                    // 清空输入框
                    this.choosenReason = ''
                    this.badReasonName = ''
                    this.dialogClosed()
                });
            },
        }
    }
</script>
<style scoped>
    .badReason{
        width: 100%;
        height: 7.5rem;
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .reasonItem{
        width: 70%;
        min-width: 20rem;
    }
    .saveBtn{
        margin: 8rem auto;
        width: 10rem;
        height: 3rem;
        background: #7e6b5a;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1.5rem;
        cursor: pointer;
    }
</style>
